import React, { Component } from "react"
import Title from "@/common/Title"
import BarChart from "@/common/BarChart"
import EstartChart from "@/common/EstartChart"
import LineChartTwo from "@/common/LineChartTwo"
import RadarChart from "@/common/RadarChart"
import RoseChart from "@/common/RoseChart"
import BarChartLeft from "@/common/BarChartLeft"
import FunnelChart from "@/common/FunnelChart"
import "./styles.css"
//柱状图基础数据
const BarChartData = [10, 20, 30, 40, 50]
//星星图基础数据
const EstartChartData = 4 //最大值为5，可在EstartChart  max设置
// 双轨迹图基础数据（原型为折线图）
const LineChartTwoData01 = [70, 50, 80, 65, 85]
const LineChartTwoData02 = [80, 76, 78, 92, 78]
const LineChartTwoList = ["第一次", "第二次", "第三次", "第四次", "第五次"]

// 雷达图基础数据
const RadarChartList = [
  { tex: "平沢唯", max: 100, num: 90 },
  { tex: "秋山澪", max: 100, num: 70 },
  { tex: "田井中律", max: 100, num: 40 },
  { tex: "琴吹紬", max: 100, num: 30 },
  { tex: "中野梓", max: 100, num: 70 },
  { tex: "真锅和", max: 100, num: 60 }
]
const RadarChartData = [90, 70, 40, 30, 70, 60]

//玫瑰图基础数据(name要和RoseChart中定义的legend:{data}保持一致)
const RoseChartData = [
  { value: 100, name: "优秀" },
  { value: 90, name: "良好" },
  { value: 80, name: "中等" },
  { value: 70, name: "及格" },
  { value: 60, name: "不及格" }
]
const LeftChartOne = [5, 12, 9, 12, 5]
const LeftChartTwo = ["0-20", "21-40", "41-60", "61-80", "81-100"]

const FunnelChartData01 = [
  { value: 60, name: "访问" },
  { value: 30, name: "咨询" },
  { value: 10, name: "订单" },
  { value: 80, name: "点击" },
  { value: 100, name: "展现" }
]
const FunnelChartData02 = [
  { value: 60, name: "访问" },
  { value: 30, name: "咨询" },
  { value: 10, name: "订单" },
  { value: 80, name: "点击" },
  { value: 100, name: "展现" }
]

class Echarts extends Component {
  state = {
    clientWidth: ""
  }
  componentDidMount() {
    //监听窗口缩放
    window.addEventListener("resize", this.resize)
  }
  resize = () => {
    const widths = document.documentElement.clientWidth
    this.setState({ clientWidth: widths })
  }

  componentWillUnmount() {
    //卸载
    window.removeEventListener("resize", this.resize)
  }
  render() {
    const { clientWidth } = this.state
    return (
      <div className="contant">
        <div className="height">
          <div className="halfLeft">
            <Title title="柱状图" />
            <div className="halfChart">
              <BarChart ids={`barchart${clientWidth}`} data={BarChartData} />
            </div>
          </div>
          <div className="halfRight">
            <Title title="星星图" />
            <div className="halfChart">
              <EstartChart ids={`estartchart${clientWidth}`} data={EstartChartData} />
            </div>
          </div>
        </div>

        <div className="height">
          <div className="halfLeft">
            <Title title="双轨迹图" />
            <div className="halfChart">
              <LineChartTwo ids={`lineChartTwo${clientWidth}`} data01={LineChartTwoData01} data02={LineChartTwoData02} list={LineChartTwoList} />
            </div>
          </div>
          <div className="halfRight">
            <Title title="雷达图" />
            <div className="halfChart">
              <RadarChart ids={`radarchart${clientWidth}`} data={RadarChartData} list={RadarChartList} />
            </div>
          </div>
        </div>

        <div className="height">
          <div className="halfLeft">
            <Title title="玫瑰图" />
            <div className="halfChart">
              <RoseChart ids={`roseChart${clientWidth}`} data={RoseChartData} />
            </div>
          </div>
          <div className="halfRight">
            <Title title="左侧柱状图" />
            <div className="halfChart">
              <BarChartLeft ids={`leftChart${clientWidth}`} data01={LeftChartOne} data02={LeftChartTwo} />
            </div>
          </div>
        </div>

        <div className="height">
          <div className="halfLeft">
            <Title title="漏斗图" />
            <div className="halfChart">
              <FunnelChart ids={`funnelChart${clientWidth}`} data01={FunnelChartData01} data02={FunnelChartData02} />
            </div>
          </div>
        </div>
      </div>
    )
  }
}

export default Echarts
